<!DOCTYPE html>
<html lang="UTF-8" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="img/icon-mogujie.png" type="image/x-icon">
        <title>蘑菇街-时尚目的地</title>
        <meta name="keywords" content="买衣服，先逛蘑菇街">
        <meta name="description"
            content="蘑菇街，是中国领先的时尚目的地。公司通过形式多样的时尚内容，种类丰富的时尚商品，以及结合红人直播、买手选款+智能推荐的售卖方式，让人们在分享和发现流行趋势的同时，尽情享受优质的购物体验。2011年，蘑菇街正式上线，2016年1月与美丽说战略融合，公司旗下包括：蘑菇街、美丽说、uni等产品与服务。">
        <link rel="stylesheet" href="css/reset1.css">
        <link rel="stylesheet" href="css/public1.css">
        <link rel="stylesheet" href="css/index1.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <style type="text/css">
        .container span{word-break:normal; width:220px; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ; padding: 5px;}
        .yangshi{
            height: 80px;
            background-color: rgb(245,245,245);
            width: 220px;
            border-radius:0 0 10px 10px;
        }
        .col-md-2{
            margin-top: 30px;
        }
        .container img{
            width: 220px;height: 294px;
            border-radius:10px 10px 0 0;
        }
        .container div{
            padding-bottom: 5px;
        }
        #chuizhi1{
            float: left;
            padding: 15px 30px 15px 30px;
            background-color: #E0E0E0;
            color: #000000;
            font-weight: 1000;
        }
        #chuizhi2{
            float: left;
            padding: 15px 30px 15px 0px;
            width: 1520px;
            height: 49px;
            margin-left: 30px;
        }
        #chuizhi{
            position: relative;
            left: 15px;
            width: 1670px;
            background-color: #fafafa;
            height: 50px;
        }
        #zjju{
            margin-left: 30px;
        }
        a{
            color: #000000;
            font-weight: 100;
        }
        a:hover {
            text-decoration: none;
            color: #000000;
        }
        #titleBT{
            display: inline; font-size: 18px;
        }
        #sele{
            margin-left: 40px;
        }
        #zh{
            float: left;
            padding: 10px 30px 10px 0px;
            width: 1520px;
            height: 50px;

            margin-left: 30px;
        }
        #xiaosanjiao {
            width:0;
            height:0;
            overflow:hidden;
            border:5px solid transparent;
            border-bottom-color:red;//top就是倒三角，bottom就是上三角，left,right类似
        }
    </style>
    </head>
    
    <body>
        <!-- 顶部悬浮搜索栏 -->
        <div id="top_search">
            <section>
                <a href="" class="title">
                    <h1>蘑菇街</h1>
                    <img src="img/MoGuJie.png" alt="">
                </a>
                <div class="search-bar">
                    <form action="">
                        <input type="search" placeholder="口红">
                        <input type="submit" value="">
                    </form>
                </div>
                <a href="">
                    <span>消息</span>
                </a>
                <a href="">
                    <span>收藏</span>
                </a>
                <a href="cart.html">
                    <span>购物车</span>
                </a>
                
                <a href="login&register.html">
                    <img src="img/login.png" alt="">
                    <p>登录</p>
                    <span></span>
                </a>
                <ul class="top_usermenu">
                    <li>
                        <p>我的订单</p>
                    </li>
                    <li>
                        <p>个人设置</p>
                    </li>
                    <li>
                        <p>退出</p>
                    </li>
                </ul>
            </section>
        </div>

        <!-- 导航栏 -->
        <header>
            <section>
                <ul>
                    <li>
                        <a href="index.html">
                            <img src="img/home.png" alt=""> 首页
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="img/market.png" alt=""> 商城
                        </a>
                    </li>
                    <li>
                        <a href="">
                            我的订单
                        </a>
                    </li>
                    <li>
                        <a href="">
                            关于我们 <img src="img/downarrow.png" alt="">
                        </a>
                        <div class="aboutUs">
                            <div class="top">
                                <div>
                                    <p>新手帮助</p>
                                    <span></span>
                                    <ul>
                                        <li>
                                            <a href="">常见问题</a>
                                        </li>
                                        <li>
                                            <a href="">自助服务</a>
                                        </li>
                                        <li>
                                            <a href="">联系客服</a>
                                        </li>
                                        <li>
                                            <a href="">意见反馈</a>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <p>权益保障</p>
                                    <span></span>
                                    <ul>
                                        <li>全国包邮</li>
                                        <li>7天无理由退货</li>
                                        <li>退货运费补贴</li>
                                        <li>限时发货</li>
                                    </ul>
                                </div>
                                <div>
                                    <p>支付方式</p>
                                    <span></span>
                                    <ul>
                                        <li>微信支付</li>
                                        <li>支付宝</li>
                                        <li>白付美支付</li>
                                    </ul>
                                </div>
                                <div>
                                    <P>移动客户端下载</P>
                                    <span></span>
                                    <ul>
                                        <li>
                                            蘑菇街
                                            <img src="https://s10.mogucdn.com/mlcdn/c45406/190221_3l1eje914h3h6ch88ce2l6eh0jl17_260x260.png"
                                                alt="">
                                        </li>
                                        <li>
                                            美丽说
                                            <img src="https://s10.mogucdn.com/mlcdn/c45406/190221_60dd5ic9e009acbjb005c8c2k8k89_260x260.png"
                                                alt="">
                                        </li>
                                        <li>
                                            uni引力
                                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181029_1e2kfd9la7jg28063eleikgj3k033_158x144.png"
                                                alt="">
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <P>商家服务</P>
                                    <span></span>
                                    <ul>
                                        <li>
                                            <a href="">商家入驻</a>
                                        </li>
                                        <li>
                                            <a href="">蘑菇街商学院</a>
                                        </li>
                                        <li>
                                            <a href="">商家社区</a>
                                        </li>
                                        <li>
                                            <a href="">规则中心</a>
                                        </li>
                                        <li>
                                            <a href="">规则众议院</a>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <P>关于我们</P>
                                    <span></span>
                                    <ul>
                                        <li>
                                            <a href="">招聘信息</a>
                                        </li>
                                        <li>
                                            <a href="">联系我们</a>
                                        </li>
                                        <li>
                                            <a href="">有害信息举报</a>
                                        </li>
                                        <li>
                                            <a href="">用户隐私保护</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="bottom">
                                <p>©2019 Mogu.com 杭州卷瓜网络有限公司</p>
                                <p>
                                    营业执照：<a
                                        href="">913301065526808764</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;增值电信业务经营许可证：<a
                                        href="">浙B2-20110349</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a
                                        href="">安全责任书</a>&nbsp;&nbsp;&nbsp;|
                                </p>
                                <p>
                                    浙公网安备 33010602010221号&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a
                                        href="">互联网医药信息服务资格证书编号：(浙)-经营性-2018-0002</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a
                                        href="">浙网食A33010003</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a
                                        href="">出版物网络交易平台服务经营备案证</a>&nbsp;&nbsp;&nbsp;|
                                </p>
                                <p>
                                    <a href="">(浙)网械平台备字[2018]第00006号</a>&nbsp;&nbsp;&nbsp;|
                                </p>
                                <p>联系电话：400-8158-666（在线时间：09：00-22：00）浙江省杭州市西湖区古墩路99号浙商财富中心1号楼</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
        </header>
        <div id="vuebox">
        <!-- 搜索栏 -->
        <div id="search">
            <a href="">
                <h1>蘑菇街</h1>
                <img src="img/MoGuJie.png" alt="">
            </a>
            <section>
                <div class="category">
                    <img src="img/category.png" alt="">
                    目录
                    <article>
                        <div class="left">
                            <span>主题市场</span>
                            <ul class="theme_list">
    
                            </ul>
                        </div>
                        <div class="center">
                            <span>热门品牌</span>
                            <a href="" class="total">全部品牌&gt;</a>
                            <ul class="hot_list">
    
                            </ul>
                        </div>
                        <div class="right">
                            <span>流行话题</span>
                            <a href="" class="total">全部话题&gt;</a>
                            <ul class="popular_list">
    
                            </ul>
                        </div>
                    </article>
                </div>
                <div class="search-bar">
                    <form action="">
                        <input type="search" placeholder="上衣" v-model="commOrTypeName">
                        <input type="button" @click.stop="selectCommo()" value="">
                    </form>
                </div>
                <a href="">
                    <span>消息</span>
                </a>
                <a href="">
                    <span>收藏</span>
                </a>
                <a href="cart.html">
                    <span>购物车</span>
                </a>
                <a href="">
                    <span>
                        &nbsp;&nbsp;&nbsp;APP
                        <div class="appCode"></div>
                    </span>
                </a>
                <a href="login&register.html">
                    <img src="img/login.png" alt="">
                    <p>登录</p>
                    <span></span>
                </a>
                <ul class="usermenu">
                    <li>
                        <p>我的订单</p>
                    </li>
                    <li>
                        <p>个人设置</p>
                    </li>
                    <li>
                        <p>退出</p>
                    </li>
                </ul>
            </section>
        </div>
        <div class="container" style="width: 1700px; margin-bottom: -10px; position: relative; right: 25px;">
            <span id="titleBT" @click="commolist()" style="color: red;">商品</span>
            <span id="titleBT" @click="brandlist()" style="margin-left: 50px;">品牌</span>
            <span id="titleBT" @click="userlist()" style="margin-left: 50px;">用户</span>
            <span id="titleBT" @click="shoplist()" style="margin-left: 50px;">店铺</span>
        </div>
        <div style="position: relative; top: 20px; left: 110px; width: 1700px;">
            <div id="xiaosanjiao"></div>
        </div>
        <div>
            <hr style="background-color: red;height: 1px; border: none;"/>
        </div>
        <div class="container" style="width: 1740px;">

            <div v-if="commos == null" class="row" style="position: relative;
				left: 15px;
				width: 1670px;
				height: 40px;
				background: #FFECEC;
				border: 1px solid #fee5ea;
				padding: 10px 30px 10px 20px;
				margin-top: 10px;
				margin-bottom: 30px;">
                抱歉！没有找到相关的商品。
            </div>

            <div style="margin-bottom: 10px;">
                <span style="display: inline;">所有分类&nbsp;&nbsp;&gt;</span>
            </div>
            <div class="row" id="chuizhi" v-if="commos != null">
                <div id="chuizhi1">分类</div>
                <div id="chuizhi2" >
                    <a href="#" id="zjju" v-for="item in type" @click="selectShopTwo(item.typename)">{{item.typename}}</a>
                </div>
            </div>
            <div class="row" id="chuizhi" v-if="commos != null">
                <div id="chuizhi1">颜色</div>
                <div id="chuizhi2" style="border-top: 1px dashed #8E8E8E;">
                    <a href="">白色系</a>
                    <a href="" id="zjju">黑色系</a>
                    <a href="" id="zjju">黄色系</a>
                    <a href="" id="zjju">蓝色系</a>
                    <a href="" id="zjju">灰色系</a>
                    <a href="" id="zjju">红色系</a>
                    <a href="" id="zjju">绿色系</a>
                    <a href="" id="zjju">棕色系</a>
                    <a href="" id="zjju">粉色系</a>
                    <a href="" id="zjju">紫色系</a>
                </div>
            </div>
            <div class="row" id="chuizhi" v-if="commos != null">
                <div id="chuizhi1">风格</div>
                <div id="chuizhi2" style="border-top: 1px dashed #8E8E8E;">
                    <a href="">韩系</a>
                    <a href="" id="zjju">百搭</a>
                    <a href="" id="zjju">简约</a>
                    <a href="" id="zjju">街头潮人</a>
                    <a href="" id="zjju">男友风</a>
                    <a href="" id="zjju">运动</a>
                    <a href="" id="zjju">学院</a>
                </div>
            </div>
            <div class="row" id="chuizhi" v-if="commos != null">
                <div id="chuizhi1">筛选</div>
                <div id="chuizhi2" style="border-top: 1px dashed #8E8E8E;">
                    <select name="" style="width: 70px;">
                        <option value="0">&nbsp;&nbsp;风格</option>
                    </select>
                    <select name="" style="width: 70px;" id="sele">
                        <option value="0">&nbsp;&nbsp;图案</option>
                    </select>
                    <select name="" style="width: 70px;" id="sele">
                        <option value="0">&nbsp;&nbsp;尺码</option>
                    </select>
                    <select name="" style="width: 70px;" id="sele">
                        <option value="0">&nbsp;&nbsp;领型</option>
                    </select>
                    <select name="" style="width: 70px;" id="sele">
                        <option value="0">&nbsp;&nbsp;材质</option>
                    </select>
                    <select name="" style="width: 100px;" id="sele">
                        <option value="0">&nbsp;&nbsp;适用身高</option>
                    </select>
                </div>
            </div>
            <div v-if="commos != null" class="row" style="position: relative;
				left: 15px;
				width: 1670px;
				height: 40px;
				background-color: #F0F0F0;
				margin-top: 10px;">
                <div style="float: left;
				padding: 10px 30px 10px 20px;
				">你可能还想搜：</div>
                <div style="float: left;
				padding: 10px 30px 10px 0px;
				width: 1400px;
				margin-left: 30px;">
                    <a href="javascript:;" @click="selectShopTwo(春上新)">春上新</a>
                    <a href="javascript:;" @click="selectShopTwo(时尚套装)" id="zjju">时尚套装</a>
                    <a href="javascript:;" @click="selectShopTwo(美裙套装)" id="zjju">美裙套装</a>
                    <a href="javascript:;" @click="selectShopTwo(连衣裙)" id="zjju">连衣裙</a>
                    <a href="javascript:;" @click="selectShopTwo(牛仔裤)" id="zjju">牛仔裤</a>
                    <a href="javascript:;" @click="selectShopTwo(休闲裤)" id="zjju">休闲裤</a>
                    <a href="javascript:;" @click="selectShopTwo(打底裤)" id="zjju">打底裤</a>
                    <a href="javascript:;" @click="selectShopTwo(春季单鞋)" id="zjju">春季单鞋</a>
                    <a href="javascript:;" @click="selectShopTwo(运动鞋)" id="zjju">运动鞋</a>
                    <a href="javascript:;" @click="selectShopTwo(小白鞋)" id="zjju">小白鞋</a>
                    <a href="javascript:;" @click="selectShopTwo(双肩包)" id="zjju">双肩包</a>
                    <a href="javascript:;" @click="selectShopTwo(运动卫衣)" id="zjju">运动卫衣</a>
                </div>
            </div>
            <div class="row" style="position: relative;
				left: 15px;
				width: 1670px;
				height: 40px;
				border: 1px solid #e5e5e5;
				margin-top: 10px;">
                <div id="zh">
                    <a href="#" @click.stop="tiaojianA(0)" style="padding-right: 30px;border-right: 1px solid #e5e5e5;">综合</a>
                    <a href="#" @click.stop="tiaojianA(1)" id="zjju" style="padding-right: 30px;border-right: 1px solid #e5e5e5;">价格</a>
                    <a href="#" @click.stop="tiaojianA(2)" id="zjju" style="padding-right: 30px;border-right: 1px solid #e5e5e5;">新品</a>
                    <input type="text" style="width: 50px; margin-left: 30px; border: 1px solid #e5e5e5;" v-model="smallMoney"/>
                    ——<input type="text" style="width: 50px; margin-left: 5px; border: 1px solid #e5e5e5;" v-model="bigMoney" />
                    <button type="button" style="border: 1px solid #e5e5e5; height: 22px;width: 40px; margin-left: 30px;" @click.stop="selectShop()">确定</button>
                    <a href="#" @click.stop="Money(50,100)" id="zjju" style="padding-right: 20px;padding-left: 20px;border: 1px solid #e5e5e5;">50-100</a>
                    <a href="#" @click.stop="Money(100,200)" style="margin-left: -5px;padding-right: 20px;padding-left: 20px;border: 1px solid #e5e5e5;">100-200</a>
                    <a href="#" @click.stop="Money(200,400)" style="margin-left: -5px;padding-right: 20px;padding-left: 20px;border: 1px solid #e5e5e5;">200-400</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2" v-for="(commo,index) in commos">
                    <a href="#" @click="selecss(commo.id)">
                        <img :src="commo.headpic" >
                        <div class="yangshi">
                        <span >{{commo.commname}}</span>
                            <div>
                                <span style="display: inline;">￥{{commo.price}}</span>
                                <span style="display: inline; position: relative; left: 100px;">1550收藏</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        </div>
</body>
</html>
<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script src="/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
<script src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script src="/webjars/axios/0.19.0/dist/axios.js"></script>
<script>
    var vm = new Vue({
        el:"#vuebox",
        data : {
            commOrTypeName:"",
            typeName:"",
            tiaojian:0,
            smallMoney:0,
            bigMoney:0,
            type:{},
            commos:{}
        },
        methods : {
            selectShop:function() {
                axios.get("/commodity/select/commodity/commandtype",{params:{"tiaojian":this.tiaojian,"commOrTypeName":this.commOrTypeName,"smallMoney":this.smallMoney,"bigMoney":this.bigMoney}}).then(res=>{
                    this.commos = res.data;
                })
            },
            Money:function(smallMoney,bigMoney) {
                this.smallMoney = smallMoney;
                this.bigMoney = bigMoney;
                this.selectShop();
            },
            selectShopTwo:function(commOrTypeName) {
                axios.get("/commodity/select/commodity/commandtype",{params:{"commOrTypeName":commOrTypeName}}).then(res=>{
                    this.typeName = commOrTypeName;
                    this.commos = res.data;
                })
            },
            tiaojianA:function(tiaojian) {
                this.tiaojian = tiaojian;
                this.selectShop();
            },
            selectType(){
                axios.get("/type/selectType").then(res=>{
                    this.type = res.data
                })
            },
            commOrType:function () {
                var commOrTypeName = $.cookie("commOrTypeName");
                this.commOrTypeName = commOrTypeName;
                this.selectShop();
            },
            selecss:function (id) {
                sessionStorage.setItem("headpicid",id);
                window.location.href = 'show.html';
            },
            commolist:function () {
                $.cookie("commOrTypeName",this.commOrTypeName);
                window.location.href = "commolist.html";
            },
            shoplist:function () {
                $.cookie("shopName",this.commOrTypeName);
                window.location.href = "shoplist.html";
            },
            brandlist:function () {
                $.cookie("brandName",this.commOrTypeName);
                window.location.href = "brandlist.html";
            },
            userlist:function () {
                $.cookie("userName",this.commOrTypeName);
                window.location.href = "userlist.html";
            }
        },
        mounted(){
            this.selectType();
            this.commOrType();
        }
    });
</script>